<script setup lang="ts">
  import { computed, ref, watch } from 'vue'
  import { useStockStore } from '@/stores/stockStore'
  import { useStrategyStore } from '@/stores/strategyStore'
  const stockStore = useStockStore()
  const selectStore = useStrategyStore()
  // 选股参数
  const selectWindow = ref('')
  const selectNum = ref('')
  const selectProfit_rate = ref('')
  const selectConcentration_90 = ref('')
  const selectConcentration_70 = ref('')
  // 搜索参数
  const searchCode = ref('')
  const searchWindow = ref('')
  const onRemoveSelectStock = (item: string) => {
    selectStore.selectStockList = selectStore.selectStockList.filter((i: string) => i !== item)
  }
  // 是否显示list
  const is_showList = computed(() => {
    return selectStore.selectStockList.length > 0
  })
  // 提示信息
  const snackbarStatus = ref(false)
  const snackbarMes = ref('选股完成')
  // 监听 selectStockList.length 的变化
  watch(() => selectStore.selectStockList.length, newLen => {
    if (newLen === Number(selectNum.value)) {
      snackbarStatus.value = true
    }
  })
  const onSearchClick = async () => {
    snackbarMes.value = await stockStore.getStockChipList(searchCode.value, searchWindow.value)
    snackbarStatus.value = true
  }
  const onSelectClick = () => {
    selectStore.selectLowIntensiveChipStrategy(selectNum.value, selectWindow.value, selectProfit_rate.value, selectConcentration_90.value, selectConcentration_70.value)
  }
  const onSelectItemClick = (item: string) => {
    searchCode.value = item
  }
  // 说明
  const informationDialogStatus = ref(false)
  const onInformationChipClick = () => {
    informationDialogStatus.value = true
  }
  // 计算当前进度百分比
  const progress = computed(() => {
    return (selectStore.selectStockList.length / Number(selectNum.value)) * 100
  })

  // 是否显示chart
  const is_showChart = computed(() => {
    return stockStore.stockChipList.length > 0
  })
  // 是否显示table
  const is_showTable = computed(() => {
    return stockStore.stockChipList.length > 0
  })
  const optionChart = computed(() => {
    // stockChipList 为空时防护
    const list = stockStore.stockChipList ?? []

    // 横轴：所有日期字符串，按时间升序排序（如果需要）
    const dates = list.map(item => item.date)

    return {
      xAxis: {
        type: 'category',
        data: dates,
        name: '日期',
        axisLabel: {
          fontSize: 14,
          color: '#FEFEFE',
          rotate: 20,
          formatter: (value: string) => value.slice(5),
        },
        nameTextStyle: {
          fontSize: 14,
          color: '#FEFEFE',
          fontWeight: 'bold',
        },
      },
      yAxis: {
        type: 'value',
        name: '集中度',
        min: 0,
        max: 0.2,
        interval: 0.05,
        axisLabel: {
          fontSize: 14,
          color: '#FEFEFE',
          formatter: (value: number) => (value * 100).toFixed(0) + '%',
        },
        nameTextStyle: {
          fontSize: 14,
          color: '#FEFEFE',
          fontWeight: 'bold',
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#ddd',
          },
        },
      },
      tooltip: {
        trigger: 'axis',
        formatter: (params: any) => {
          let res = params[0].axisValue + '<br/>'
          for (const p of params) {
            res += `${p.marker} ${p.seriesName}: ${(p.data * 100).toFixed(2)}%<br/>`
          }
          return res
        },
      },
      legend: {
        data: ['90集中度', '70集中度'],
        textStyle: {
          fontSize: 14,
          color: '#FEFEFE',
        },
        top: '5%',
      },
      series: [
        {
          name: '90集中度',
          type: 'line',
          data: list.map(item => item.concentration_90),
          smooth: true,
          lineStyle: { width: 2 },
          formatter: (value: number) => (value * 100).toFixed(0) + '%',
        },
        {
          name: '70集中度',
          type: 'line',
          data: list.map(item => item.concentration_70),
          smooth: true,
          lineStyle: { width: 2 },
          formatter: (value: number) => (value * 100).toFixed(0) + '%',
        },
      ],
      grid: {
        top: '20%',
      },
    }
  })

</script>

<template>
  <v-container>
    <v-row>
      <v-card
        class="w-100 ma-2"
        hover
        variant="outlined"
      >
        <template #subtitle>
          <v-container>
            <v-row>
              <text>低位单峰密集筹码选股</text>
              <v-spacer />
              <v-chip
                prepend-icon="mdi-information"
                @click="onInformationChipClick"
              >
                说明
              </v-chip>
              <v-snackbar
                v-model="snackbarStatus"
              >
                {{ snackbarMes }}
                <template #actions>
                  <v-btn
                    color="pink"
                    variant="text"
                    @click="snackbarStatus = false"
                  >
                    Close
                  </v-btn>
                </template>
              </v-snackbar>
              <v-dialog
                v-model="informationDialogStatus"
                transition="dialog-bottom-transition"
                width="auto"
              >
                <v-card
                  prepend-icon="mdi-information"
                  title="低位高峰密集型选股策略: "
                >
                  <template #text>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;以<em>002177</em>股票在6, 7月的表现为例, 一般性的主力控股型股票中, 股票行情一般呈现三个基本阶段---横盘, 上涨和下跌(或振荡), 对应的主力的三个行为---吸筹, 洗盘和出货(关于主力行为在首页的筹码学中提及)。</p>
                    <p><img alt="" src="https://zhixuntrader-pic.oss-cn-shenzhen.aliyuncs.com/Snipaste_2025-07-17_23-04-08%281%29.png"></p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;在吸筹阶段中, 市场行情一般呈现一段时间的横盘, 此时, 主力不断地以较低的价格去获取更多的筹码, 筹码不断集中, 然后等待合适的时间点(如特定的题材, 消息, 赛道, 政策等), 就会进入拉升上涨的阶段。
                      此时主力会吸引尽量多的散户进场, 一边拉升股票, 一边出货, 与散户完成筹码交换, 完成洗盘。到了后期, 主力完成洗盘, 低价位的支撑力不足, 股票就会进入下跌的行情中。</p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;现在对股票的各个阶段进行量化(相关内容在首页的筹码学中可以了解到), 在吸筹阶段中, 随着低价筹码的不断集中, 90和70集中度在不断减少, 日平均价格小于日收盘价。</p>
                    <p><img alt="" src="https://zhixuntrader-pic.oss-cn-shenzhen.aliyuncs.com/Snipaste_2025-07-17_23-05-10.png"></p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;拉升的阶段直至后面的下跌和振荡阶段, 筹码在不断的完成交换, 越来越分散, 90和70的集中度会不断增大。</p>
                    <p><img alt="" src="https://zhixuntrader-pic.oss-cn-shenzhen.aliyuncs.com/Snipaste_2025-07-17_23-05-33.png"></p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;而到了再后期, 甚至会造成大多数散户被套牢的情况。</p>
                    <p><img alt="" src="https://zhixuntrader-pic.oss-cn-shenzhen.aliyuncs.com/Snipaste_2025-07-19_02-14-59.png"></p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;从以上各个阶段的筹码数据图可以看出筹码在从一个低位高峰密集型向多峰分散或者双峰密集再到高位筹码的转变, 所以我们的目标就是得筛选出在吸筹阶段的股票, 在这个选股策略中, 对吸筹阶段的选股作出以下几个条件: </p>
                    <ol>
                      <li>在时间窗口内, 90和70集中度小于默认值。</li>
                      <li>在时间窗口内, 当日平均成本小于当日收盘价。</li>
                      <li>在时间窗口内, 获利比例大于默认值。</li>
                    </ol>
                    <br>
                    <h2>参数说明: </h2>
                    <ul>
                      <li>
                        <strong>选股数量(num): 必填</strong> 填入需要筛选出股票的数量 如: <em>5</em>
                      </li>
                      <li>
                        <strong>时间窗口(window): 必填</strong> 填入连续符合条件的时间窗口 如: <em>5</em>
                      </li>
                      <li>
                        <strong>收益率(profit_rate): 选填 默认为<em>0.4</em></strong> 填入需要满足的获利比例 如: <em>0.5</em>
                      </li>
                      <li>
                        <strong>90集中度(concentration_90): 选填 默认为<em>0.12</em></strong> 填入需要满足的90集中度 如: <em>0.11</em>
                      </li>
                      <li>
                        <strong>70集中度(concentration_70): 选填 默认为<em>0.1</em></strong> 填入需要满足的90集中度 如: <em>0.12</em>
                      </li>
                    </ul>
                    <br>
                    <h2>操作说明: </h2>
                    <ol>
                      <li>
                        按参数说明填入对应的参数
                      </li>
                      <li>
                        点击<strong>选股</strong>按钮, 此时后天就会执行程序, 在下方的列表中会不断显示新筛选出的结果, 进度条也会有相应的进度显示。
                        <br>
                        <p><img alt="" src="https://zhixuntrader-pic.oss-cn-shenzhen.aliyuncs.com/Snipaste_2025-07-19_12-20-50.png"></p>
                      </li>
                      <li>
                        点击下方的结果, 右边筹码数据获取中的筹码会自动填充, 或者点击下拉框也能选择, 填入要获取的时间窗口, 再点击<strong>搜索</strong>按钮, 下方的列表就会展示相应的筹码数据(具体的含义见首页筹码学中了解), 而下方的图表这会显示相应的集中度变化。
                        <br>
                        <p><img alt="" src="https://zhixuntrader-pic.oss-cn-shenzhen.aliyuncs.com/result%20%282%29.jpeg"></p>
                      </li>
                    </ol>
                    <br>
                    <h2>注意说明: </h2>
                    <ol>
                      <li>在第一次选股时, 对股票信息和时间没有进行缓存, 可能会比较慢, 有了缓存之后, 就会比较快了。</li>
                      <li>该算法的判断仅在理想情况下, 要按照实际情况去调整时间窗口, 收益率和集中度参数, 有可能会出现结果太多而不理想的情况。</li>
                      <li><strong>筛选出的股票需要结合其他技术指标进行分析, 不能一概而论。</strong></li>
                    </ol>
                    <br>
                    <h2><strong>按<em>ESC</em>退出此说明</strong></h2>
                  </template>
                </v-card>
              </v-dialog>
            </v-row>
          </v-container>
        </template>
        <v-container>
          <v-row>
            <v-form class="w-100">
              <v-container>
                <v-row>
                  <v-col cols="4">
                    <v-text-field v-model="selectNum" label="选股数量" required variant="outlined" />
                  </v-col>
                  <v-col cols="4">
                    <v-text-field v-model="selectWindow" label="时间窗口" required variant="outlined" />
                  </v-col>
                  <v-col cols="4">
                    <v-text-field v-model="selectProfit_rate" label="收益率" variant="outlined" />
                  </v-col>
                </v-row>
                <v-row>
                  <v-col cols="4">
                    <v-text-field v-model="selectConcentration_90" label="90集中度" variant="outlined" />
                  </v-col>
                  <v-col cols="4">
                    <v-text-field v-model="selectConcentration_70" label="70集中度" variant="outlined" />
                  </v-col>
                  <v-spacer />
                  <v-col class="d-flex flex-column align-end justify-center" cols="4">
                    <v-btn
                      prepend-icon="mdi-magnify"
                      variant="outlined"
                      @click="onSelectClick"
                    >
                      选股
                    </v-btn>
                  </v-col>
                </v-row>
              </v-container>
            </v-form>
          </v-row>
          <v-row v-if="is_showList">
            <v-progress-linear :model-value="progress" />
            <v-list class="w-100" style="height: 340px">
              <v-list-item
                v-for="item in selectStore.selectStockList"
                :key="item"
                link
                @click="onSelectItemClick(item)"
              >
                <v-list-item-title>{{ item }}</v-list-item-title>
                <template #append>
                  <v-icon
                    icon="mdi-close-circle"
                    style="cursor: pointer"
                    @click="onRemoveSelectStock(item)"
                  />
                </template>
              </v-list-item>
            </v-list>
          </v-row>
        </v-container>
      </v-card>
    </v-row>
    <v-row>
      <v-card
        class="w-100 ma-2"
        hover
        subtitle="筹码数据"
        variant="outlined"
      >
        <v-form>
          <v-container>
            <v-row align="center">
              <v-col>
                <v-combobox
                  v-model="searchCode"
                  :items="selectStore.selectStockList"
                  label="股票代码"
                  variant="outlined"
                />
              </v-col>
              <v-col>
                <v-text-field v-model="searchWindow" label="时间窗口" required variant="outlined" />
              </v-col>
              <v-spacer />
              <!-- 垂直居中 靠右按钮 -->
              <v-col class="d-flex flex-column align-end justify-center">
                <v-btn prepend-icon="mdi-magnify" variant="outlined" @click="onSearchClick">
                  搜索
                </v-btn>
              </v-col>
            </v-row>
          </v-container>
        </v-form>
        <v-sheet
          v-if="is_showTable"
          border
          class="w-100"
          :elevation="1"
          rounded
        >
          <v-container>
            <v-row v-if="is_showTable">
              <v-data-table :fixed-header="true" :items="stockStore.stockChipList" style="height: 500px;" />
            </v-row>
            <v-row v-if="is_showChart">
              <v-divider class="mt-4 mb-4" thickness="2" />
              <e-charts class="w-100" :option="optionChart" style="height: 500px;" />
            </v-row>
          </v-container>
        </v-sheet>
      </v-card>
    </v-row>
  </v-container>
</template>

<style scoped lang="scss">

</style>
